<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../baselayout/import.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${staticPath}/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="${staticPath}/assets/css/highcharts.css">
<title>详情</title>
</head>
<body>
	<div id="pie">	
	</div>
	<div id="line">	
	</div>
</body>
<input type="hidden" name="figure_type" value="${figureType} ">
<input type="hidden" name="title" value="${title}">
<input type="hidden" name="sub_title" value="${subTitle}">


<input type="hidden" name="yAxis_name" value="${yName}">

<input type="hidden" name="pie_data">

<script src="${staticPath}/js/jQuery-1.9.1.js"></script>
<script src="${staticPath}/assets/js/figure/highcharts.js"></script>
<c:if test="${figureType == 'line'  || figureType == 'column' }">

<c:forEach items="${x}" varStatus="i" var="item">
	<input type="hidden" name="x" value="${item}">
</c:forEach>

<c:forEach items="${y}" varStatus="i" var="item">
	<input type="hidden" name="y" value="${item}">
</c:forEach>

<input type="hidden" name="series_name" value="${sName}">

<script type="text/javascript">
$(function () {
	var title = $("input[name=title]").val();
	var sub_title = $("input[name=sub_title]").val();
	var y_name = $("input[name=yAxis_name]").val();
	var serie_name  = $("input[name=series_name]").val();
	
	var x = $("input[name=x]").map(function(idex,item,arr){
		return item.value;
	});
	var y = $("input[name=y]").map(function(idx,item,arr){
		return parseInt(item.value);
	});
	
	var yName = $("input[name=yAxis_name]").val();

    $('#line').highcharts({
    		chart:{
    			type:'${figureType}',	
    		},
        title: {
            text: title,
            x: -20 //center
        },
        subtitle: {
            text: sub_title,
            x: -20
        },
        xAxis: {
            categories:x
        },
        yAxis: {
            title: {
                text: y_name
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '${valueSuffix}'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: serie_name,
            data:y
        }]
    });
      
});


</script>
</c:if>

<c:if test="${figureType == 'pie' }">
<c:forEach items="${y}" varStatus="i" var="item">
	<input type="hidden" name="y" value="${item}">
</c:forEach>

<script type="text/javascript">
$(function () {
	var title = $("input[name=title]").val(),
		y = [].slice.call($("input[name=y]").map(function(idex,item,arr){
		return String.prototype.slice.call(item.value,1,-1);
	})),subtitle=$("input[name=sub_title]").val();
	for(var idx =0;idx<y.length;idx++){
		p = y[idx].split(",");
		y[idx] = new Array(p[0],parseInt(p[1]));
	}
	var data =  y;
    $('#pie').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: title
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name:subtitle,
            data:data
        }]
    });
    
    
    
    
    
});


</script>
</c:if>


</html>